This code demonstrates highlight of multiple buildings. Hold down shift as you click on additional buildings to add them to the selection.

Note: this is a workaround until multiple highlight support is a builtin feature; this method is not nearly as efficient as the highlight-by-color- picking method used in the single-highlight hover example.

var HIGHLIGHT_COLOR = '#f08000';
var buildings = {};
var selected = {};

function isHighlighted(id) {
  return (id in selected);
}

// Store the buildings as they are loaded for later use
osmb.on('loadfeature', function(e) {
    var b = e.detail;
    if (b.id.indexOf('highlight_') === -1) {
      var id = b.properties.relationId || b.id || b.properties.id;
      b.properties.color = HIGHLIGHT_COLOR;
      b.properties.roofColor = HIGHLIGHT_COLOR;
      b.properties.relationId = '';
      b.id = 'highlight_' + b.id;
      if (id in buildings) {
        buildings[id].push(b);
      } else {
        buildings[id] = [b];
      }
    }
});

var geojsonHighlight;
function highlightBuildings(buildingsByID) {
    // Clear previous highlight
    if (geojsonHighlight) {
        osmb.show(isHighlighted);
        geojsonHighlight.destroy();
    }
    // Add any new selections
    if (buildingsByID) {
        var geojson = {
            id: 'highlighted',
            type: 'FeatureCollection',
            features: []
        };
        for (var id in buildingsByID) {
            geojson.features.push.apply(geojson.features, buildingsByID[id]);
        }
        // Add your own "highlighted" copies
        geojsonHighlight = osmb.addGeoJSON(geojson, {fadeIn: false});
        // Hide the original buildings
        osmb.hide(isHighlighted);
    }
}

var shiftDown = false;
function trackShift(e) {
    shiftDown = e.shiftKey
}
document.addEventListener('keyup', trackShift);
document.addEventListener('keydown', trackShift);

function buildingSelected(id) {
   if (id) {
      // If shift not depressed, start a new selection
      if (!shiftDown) {
        highlightBuildings(null);
        selected = {};
      }
      selected[id] = buildings[id];
      highlightBuildings(selected);
    } else {
      highlightBuildings(null);
      selected = {};
    } 
}

var mousePos;
map.on('pointerdown', function(e) {
  mousePos = {x: e.detail.x, y: e.detail.y};
});

map.on('pointerup', function(e) {
  if (e.detail.x === mousePos.x && e.detail.y === mousePos.y) {
    // Add highlight if this wasn't a map drag/pan
    osmb.getTarget(e.detail.x, e.detail.y, buildingSelected);
  }
});